<script setup>
import {inject, ref} from 'vue';
import {onLoad} from "@dcloudio/uni-app";

const title = ref('')
const isMiniProgram = inject('isMiniProgram');
const arrowdownText = ref('Luma Ai')
const showDropdown = ref(false)

const dropdownItems = [
  {id: 1, name: 'Option 1'},
  {id: 2, name: 'Option 2'},
  {id: 3, name: 'Option 3'}
]


onLoad((option) => {
  console.log(option);
  title.value = option.title;
})

const leftClick = () => {
  uni.navigateBack();
}
const arrowdownClick = () => {
  showDropdown.value = !showDropdown.value
}
// 选择某一项后处理逻辑
const selectOption = (option) => {
  console.log('选择了:', option);
  arrowdownText.value = option.name;
  showDropdown.value = false // 选择后隐藏下拉框
}
</script>

<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#f8f8f8">
    <view class="nav-top-box">
      <fui-icon :size="48" name="arrowleft" @click="leftClick"></fui-icon>
      <view style="width: 160rpx;">{{ title }}</view>
      <view :style="{ marginRight: isMiniProgram ? '176rpx' : '0' }" class="label-box" @click="arrowdownClick">
        <view>{{ arrowdownText }}</view>
        <fui-icon name="arrowdown"></fui-icon>
      </view>
    </view>
  </fui-nav-bar>
  <view v-show="showDropdown" class="dropdown-wrapper">
    <view class="dropdown-arrow"></view>
    <view class="dropdown-content">
      <view v-for="item in dropdownItems" :key="item.id" class="dropdown-item" @click="selectOption(item)">
        {{ item.name }}
      </view>
    </view>

  </view>
  <view class="AI-interaction">
    <text>isMiniProgram: {{ isMiniProgram }}</text>
  </view>
</template>


<style lang="scss" scoped>
.nav-top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .label-box {
    width: 212rpx;
    height: 84rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
}

/* 下拉框的样式 */
.dropdown-wrapper {
  position: absolute;
  top: 180rpx; /* 下拉框相对于导航栏的位置 */
  right: 30rpx; /* 根据需求调整右侧位置 */
  width: 300rpx;
  background-color: #fff;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.dropdown-arrow {
  position: absolute;
  top: 0; /* 控制三角形的上边距 */
  left: 20rpx; /* 根据导航栏位置调整 */
  width: 0;
  height: 0;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-bottom: 20rpx solid #ccc; /* 设置三角形颜色 */
}

.dropdown-content {
  background-color: #fff;
  top: 0;

  .dropdown-item {
    padding: 20rpx;
    cursor: pointer;
  }

  .dropdown-item:hover {
    background-color: #f0f0f0;
  }
}
</style>
